import React from 'react';
import { Button, WhiteSpace, WingBlank, InputItem } from 'antd-mobile';
import { connect } from 'dva';
import _ from 'lodash';
import moment from 'moment';
import Container from '../components/Base/Container';
import { Helmet } from "react-helmet";
import ChatMessage from '../components/im/ChatMessage';
import 'react-chat-elements/dist/main.css';
import styles from './IMChatMessage.less';

class IMChatMessage extends React.Component {

  render() {
    const { onReadMessage, onSendMessage, vip, sender, target, messages } = this.props;
    return (
      <Container title={vip.vip_name} className={styles.imChatMessage}>
        <Helmet>
          <style>{'html, body, #root { height: 100%; }'}</style>
        </Helmet>
        {
          sender && <ChatMessage
            sender={sender}
            target={target}
            senderType={'saleman'}
            messages={messages}
            onSendMessage={onSendMessage}
            onReadMessage={(messageIds) => {
              onReadMessage(messageIds);
            }}
          />
        }
      </Container>
    );
  }
}

export default connect((state) => {
  return {
    sender: state.im.sender,
    target: state.im.target,
    messages: state.im.chatMessages,
    vip: state.im.vip,
  };
}, (dispatch) => {
  return {
    onSendMessage(type, value) {
      dispatch({ type: 'im/sendMessage', payload: { type, content: value } });
    },
    onReadMessage(messageIds) {
      dispatch({ type: 'im/readMessage', payload: { messageIds } });
    },
  };
})(IMChatMessage);
